function $(se) {
    return document.querySelector(se)
}
function $s(se) {
    return document.querySelectorAll(se)
}
//选项卡菜单
$("#number").addEventListener("click",function(){
    // console.log(111);

})
$s(".modol ul li").forEach(function(dom){
   
    console.log(111);

    //点击添加类名
    dom.addEventListener("click",function(){
        // console.log(111);
        // console.log(111);

        //进来先一刀切
        $s(".modol ul li").forEach(function(v){
            v.classList.remove("active")
        })


        //点击添加类名
        dom.classList.add("active")
        
    })
})


// 给选项卡菜单添加点击事件
//找选项卡菜单和下面内容div节点
let li=document.querySelectorAll(".modal ul li")
let divs=document.querySelectorAll(".tab-content div")
//console.log(li,divs);

//遍历 添加点击事件
li.forEach(function(Value,index){
    Value.addEventListener("click",function(){
        //console.log(111);
        //一刀切
        li.forEach(function(a,b){
            a.classList.remove("active")
            divs[b].classList.remove("act")
        })


        //点击之后给li添加类名active
        Value.classList.add("active")
        divs[index].classList.add("act")
    })
})

//找申请数据button按钮节点，添加点击事件
let modal=document.querySelector(".modal")
let buts=document.querySelectorAll(".api-picture button")
// console.log(modal,buts);
//遍历添加点击事件
buts.forEach(function(but,i){
    but.addEventListener("click",function(){
        //console.log(111);点击之后模态框就display="block"
        modal.style.display="block"
    })



})

// //点击模态框阴影部分模态框就关闭
// modal.addEventListener("click",function(){
//     modal.style.display="none"
// })
// //模态框阻止冒泡事件时间 点击中间小盒子整个模态框不能关闭
//     //找节点
//     let tab=document.querySelector(".tab")
//     tab.addEventListener("click",function(event){
//         event.stopPropagation()
//     })




//模态框表单验证
// 获取节点
let uname=document.querySelector(".tab-content .uname")//用户名节点
let paswd=document.querySelector(".tab-content .paswd")//密码节点
let but=document.querySelector(".tab-content .but")//登录按钮节点
let cxsr=document.querySelector(".tab-content-laft p:nth-child(1) b")//用户名从新输入节点
let cxcodeCxsr=document.querySelector(".tab-content-laft p:nth-child(2) b")//密码从新输入节点
//console.log(cxsr,cxcodeCxsr);
//console.log(uname,paswd,but);
//用户名失焦事件
uname.addEventListener("blur",function(){
    if ((uname.value.length>6 && uname.value.length<10)||uname.value.length==0) {
       uname.style.color = "green"
       cxsr.style.display = ""
       // uname1.textContent = "可以使用"
   } else {
    cxsr.style.display = "block"
    uname.style.color = "red"
   }
})

//密码失焦事件
paswd.addEventListener("blur",function(){
    if ((paswd.value.length>6 && paswd.value.length<10)||paswd.value.length==0) {
        paswd.style.color = "green"
        cxcodeCxsr.style.display = ""
       // uname1.textContent = "可以使用"
   } else {
    cxcodeCxsr.style.display = "block"
    paswd.style.color = "red"
   }
})


//登录按钮点击事件
but.addEventListener("click",function(){
    console.log(1111);
    if ((uname.value.length>6 && uname.value.length<10)) {
        uname.style.color = "green"
        cxsr.style.display = ""
        // uname1.textContent = "可以使用"
    } else {
     cxsr.style.display = "block"
     uname.style.color = "red"
    }
    if ((paswd.value.length>6 && paswd.value.length<10)) {
        paswd.style.color = "green"
        cxcodeCxsr.style.display = ""
       // uname1.textContent = "可以使用"
   } else {
    cxcodeCxsr.style.display = "block"
    paswd.style.color = "red"
   }
})

